<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=1100,initial-scale=1,maximum-scale=1,user-scalable=yes">

		<link rel="Shortcut Icon" href="../static/favicon.ico">
		<!-- Standard iPad -->
		<link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="../static/touch-icon-ipad-144.png" />
		<!-- Retina iPad -->
		<link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="../static/touch-icon-ipad-144.png" />
		<link rel="stylesheet" href="../static/css/main.css">
		<link rel="stylesheet" href="../static/css/messageCenter.css">
		<!--[if lt IE 9]>
	<script src="../static/js/html5.js"></script>
	<![endif]-->
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<div class="topbar">
				<div class="layout">
					<div class="bar_left">
						<ul>
							<li><span style="color: #fff;">畅想品质生活</span></li>
							<li style="margin-left: 40px;"><span>客服电话：400-996-4866</span></li>
							<li class="WeChat">
								<i></i>
								<div>
									<span><em></em></span>
									<img src="../static/images/WeChat.jpg">
									<p>扫一扫加微信</p>
								</div>
							</li>
							<li class="weibo">
								<a href=""><i></i></a>
								<!-- <div>
								<span><em></em></span>
								<img src="../static/images/weibo.png">
								<p>扫一扫加微博</p>
							</div> -->
							</li>
						</ul>
					</div>
					<div class="bar_right" style="display: none;">
						<a href="">登录</a>&nbsp;&nbsp;
						<a href="">注册</a>&nbsp;&nbsp;|&nbsp;
						<a href="">我的订单</a>&nbsp;&nbsp;|
						<a href="">下载APP</a>
					</div>
					<!-- 登陆后显示 -->
					<div class="bar_right">
						<span>欢迎您</span>
						<a href="">boss，</a>
						<a href="javascript:;">退出</a>&nbsp;&nbsp;|
						<a href="">我的订单</a>&nbsp;&nbsp;|
						<a href="">下载APP</a>

					</div>

				</div>
			</div>
			<!-- topbar-end -->
			<div class="logo">
				<div class="layout">
					<div class="logo_left">
						<!-- logo size 200px*70px -->
						<a href="" class="logoimg">
							<img src="../static/images/login_log.png" alt="">
						</a>
					</div>
					<div class="logo_right">
						<div class="search">
							<input type="text" placeholder="黑龙江顶级黑木耳">
							<a href="" class=""></a>
						</div>
						<div class="shopping-cart">
							<a href="">
								<span class="badge">12</span>
							</a>
						</div>
					</div>
				</div>
			</div>
			<nav class="nav">
				<div class="layout">
					<ul class="">
						<li>
							<a href="" class="active">首页</a>
						</li>
						<li>
							<a href="">进口食品</a>
						</li>
						<li>
							<a href="">小家电</a>
						</li>
						<li>
							<a href="">养生精品</a>
						</li>
						<li>
							<a href="">精品农业</a>
						</li>
						<li>
							<a href="">茶叶</a>
						</li>
						<li>
							<a href="">户外运动</a>
						</li>
						<li>
							<a href="">厨房电器</a>
						</li>
						<li>
							<a href="">锅具</a>
						</li>
						<li>
							<a href="">生活电器</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!--内容-->
		<div class="content">
			<!--左边导航-->
			<div class="left_nav" style="margin-bottom: 60px;">
				<ul>
					<li>
						<h4><a href="">个人中心</a></h4></li>
					<li>
						<a href="" class="change">信息中心</a>
					</li>
					<li>
						<a href="">个人信息</a>
					</li>
					<li>
						<a href="">账号安全</a>
					</li>
					<li>
						<a href="">地址管理</a>
					</li>
				</ul>
				<ul>
					<li>
						<h4><a href="">订单管理</a></h4></li>
					<li>
						<a href="">订单管理</a>
					</li>
					<li>
						<a href="">优惠券<span style="color: #e11a1f;">(4)</span></a>
					</li>
					<li>
						<a href="">交易记录</a>
					</li>
					<li>
						<a href="">我的收藏</a>
					</li>
				</ul>
				<ul>
					<li>
						<h4><a href="">我是商户</a></h4></li>
					<li>
						<a href="">商品管理</a>
					</li>
					<li>
						<a href="">生意订单</a>
					</li>
					<li>
						<a href="">运费管理</a>
					</li>
					<li>
						<a href="">售后管理</a>
					</li>
					<li>
						<a href="">活动管理</a>
					</li>
					<li>
						<a href="">优惠券管理</a>
					</li>
					<li>
						<a href="">店铺管理</a>
					</li>
				</ul>
			</div>
			<!--左边结束-->
			<div class="content_right" id="content_right">
				<div class="content_right_title">
					<input type="checkbox" name="checkItems" id="checkItems" />
					<div style="margin-left: 44px;margin-top: -19px; color: #666666;">全选</div>
					<div class="titles">
						<span>标题</span>
						<span>时间</span>
					</div>
				</div>

				<!--消息列表-->
				<div class="message_list">
					<input type="checkbox" name="items" />
					<div class="message_content">
						<p class="message_open">多媒体消息业务（MMS）以多媒体消息业务中心（MMSC）为核心， 通过数字蜂窝移动通信网向GPRS网和cdma2000 1x网的移动多媒体消息 终端提供的一种非实时的消息类业务。消息内容可包括文本、图像、声音、 视频片段等一种或多种媒体内容。该业务基于WAP方式实现，下层承载网络 现阶段要求支持GPRS承载、cdma2000 1x承载或未来的第3代移动通信承载方式。
						</p>
						<div class="message_time">
							<p>2017-12-19 17:09:07</p>
						</div>
					</div>
				</div>

				<div class="message_list message_lists">
					<input type="checkbox" name="items" />
					<div class="message_content">
						<p class="message_open">多媒体消息业务（MMS）以多媒体消息业务中心（MMSC）为核心， 通过数字蜂窝移动通信网向GPRS网和cdma2000 1x网的移动多媒体消息 终端提供的一种非实时的消息类业务。消息内容可包括文本、图像、声音、 视频片段等一种或多种媒体内容。该业务基于WAP方式实现，下层承载网络 现阶段要求支持GPRS承载、cdma2000 1x承载或未来的第3代移动通信承载方式。
						</p>
						<div class="message_time">
							<p>2017-12-19 17:09:07</p>
						</div>
					</div>
				</div>
				
				<div class="message_list message_lists">
					<input type="checkbox" name="items" />
					<div class="message_content">
						<p class="message_open">多媒体消息业务（MMS）以多媒体消息业务中心（MMSC）为核心， 通过数字蜂窝移动通信网向GPRS网和cdma2000 1x网的移动多媒体消息 终端提供的一种非实时的消息类业务。消息内容可包括文本、图像、声音、 视频片段等一种或多种媒体内容。该业务基于WAP方式实现，下层承载网络 现阶段要求支持GPRS承载、cdma2000 1x承载或未来的第3代移动通信承载方式。
						</p>
						<div class="message_time">
							<p>2017-12-19 17:09:07</p>
						</div>
					</div>
				</div>
				
				

				<div class="del" id="del">
					<button>删除</button>
				</div>
			</div>

		</div>
		<!--尾部-->
		<footer class="footer">

		</footer>
	</body>

</html>
<script type="text/javascript">
	//全选/不选  
	document.getElementById('checkItems').onclick = function() {
		// 获取所有的复选框  
		var checkElements = document.getElementsByName('items');
		if(this.checked) {
			for(var i = 0; i < checkElements.length; i++) {
				var checkElement = checkElements[i];
				checkElement.checked = "checked";
			}

		} else {
			for(var i = 0; i < checkElements.length; i++) {
				var checkElement = checkElements[i];
				checkElement.checked = null;
			}
		}

	}

	document.getElementById('del').onclick = function(){
		var items = document.getElementsByName('items');
		var content_right=document.getElementById('content_right');
		var message_list=document.getElementById('message_list');
		for(var i = 0; i < items.length; i++) {
			if(items[i].checked) {
				var message_list=items[i].parentNode;
				content_right.removeChild(message_list);
				i--;
			}
		}
	}
	
	function messageOpen(){
		var message_open=document.getElementsByClassName('message_open');
		
		for(var i=0;i<message_open.length;i++){
			message_open[i].onclick=function(){
				if(this.style.whiteSpace=='normal'){
					this.style.whiteSpace='nowrap';
				}else{
					this.style.whiteSpace='normal';
				}
			}
		}
	}
	messageOpen();
	
</script>